import 'dart:async';

import 'package:color_dart/RgbaColor.dart';
import 'package:flutter/material.dart';
import 'package:im_flutter_sdk_example/utils/screen.dart';
import 'package:im_flutter_sdk_example/jsonserialize/comment/data.dart';
import 'package:im_flutter_sdk_example/provider/comment_model.dart';
import 'package:im_flutter_sdk_example/utils/time_util.dart';
import 'package:provider/provider.dart';
import 'package:like_button/like_button.dart';

class CommmentItem extends StatefulWidget {
  final CommentData item;
  final Function getFocus;
  CommmentItem({Key key, this.item, this.getFocus}) : super(key: key);

  @override
  _CommmentItemState createState() => _CommmentItemState();
}

class _CommmentItemState extends State<CommmentItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white60,
      padding: EdgeInsets.fromLTRB(5, 10, 18, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipOval(
            child: Image.network(
              '${widget.item.userInfo.avatar}',
              width: 26,
              height: 26,
              fit: BoxFit.cover,
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 10),
              padding: EdgeInsets.only(bottom: 11),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Container(
                              constraints: BoxConstraints(
                                maxWidth: 280.w,
                              ),
                              child: Text('${widget.item.userInfo.nickname}',
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                    color: rgba(68, 68, 68, 1),
                                    fontSize: 28.nsp,
                                    fontWeight: FontWeight.bold,
                                  )),
                            ),
                            // LabelVipLeavel(),
                            Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Text(
                                  TimeUtil.stringFromDateTimeShort(
                                      widget.item.createdTime),
                                  style: TextStyle(
                                      fontSize: 24.nsp,
                                      color: rgba(163, 163, 163, 1))),
                            )
                          ],
                        ),
                        LikeButton(
                          onTap: (bool isLiked) {
                            return tapThumbsUp(
                                widget.item.commentId,
                                widget.item.usersLike,
                                widget.item.commentUserId);
                          },
                          size: 14,
                          bubblesColor: BubblesColor(
                            dotPrimaryColor: Color(0xFFDE5A02),
                            dotSecondaryColor: Color(0xFFDE5A02),
                          ),
                          isLiked: null,
                          likeBuilder: (bool isLiked) {
                            return _buildLikeIcon(widget.item.usersLike
                                .contains(widget.item.commentUserId));
                          },
                          likeCount: widget.item.usersLike.length,
                          countBuilder: (int count, bool isLiked, String text) {
                            var color = Colors.grey;
                            Widget result;
                            if (count == 0) {
                              result = Text(
                                "",
                                style: TextStyle(color: color, fontSize: 12),
                              );
                            } else
                              result = Text(
                                text,
                                style: TextStyle(color: color, fontSize: 12),
                              );
                            return result;
                          },
                        ),
                      ],
                    ),
                    Container(
                      child: Text('${widget.item.content}', maxLines: null),
                      margin: EdgeInsets.only(bottom: 12, top: 8),
                    ),
                    Padding(
                      padding: EdgeInsets.only(bottom: 6),
                      child: Row(
                        children: [
                          InkWell(
                            onTap: () {
                              tapReplay();
                            },
                            child: Text('回复',
                                style: TextStyle(
                                    color: rgba(72, 107, 157, 1),
                                    fontSize: 12)),
                          )
                        ],
                      ),
                    ),
                    Divider(
                      color: rgba(235, 235, 235, 1),
                      height: 1,
                    ),
                    Column(
                      children: widget.item.replyList.length > 0
                          ? widget.item.replyList
                              .toList()
                              .map((e) => Container(
                                    padding: EdgeInsets.only(top: 10),
                                    child: Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        ClipOval(
                                          child: Image.network(
                                            '${e.replyCommentUserAvatar}',
                                            width: 26,
                                            height: 26,
                                            fit: BoxFit.cover,
                                          ),
                                        ),
                                        Expanded(
                                          child: Container(
                                            margin: EdgeInsets.only(left: 10),
                                            padding:
                                                EdgeInsets.only(bottom: 11),
                                            child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .spaceBetween,
                                                    children: [
                                                      Row(
                                                        children: [
                                                          Container(
                                                            constraints:
                                                                BoxConstraints(
                                                                    maxWidth:
                                                                        240.w),
                                                            child: Text(
                                                                '${e.replyCommentUserName}',
                                                                maxLines: 1,
                                                                overflow:
                                                                    TextOverflow
                                                                        .ellipsis,
                                                                style: TextStyle(
                                                                    color: rgba(
                                                                        68,
                                                                        68,
                                                                        68,
                                                                        1),
                                                                    fontSize:
                                                                        14)),
                                                          ),
                                                          Padding(
                                                            padding:
                                                                const EdgeInsets
                                                                        .only(
                                                                    left: 10),
                                                            child: Text(
                                                                TimeUtil.stringFromDateTimeShort(e
                                                                    .createdTime),
                                                                style: TextStyle(
                                                                    fontSize:
                                                                        12,
                                                                    color: rgba(
                                                                        163,
                                                                        163,
                                                                        163,
                                                                        1))),
                                                          )
                                                        ],
                                                      ),
                                                      LikeButton(
                                                        onTap: (bool isLiked) {
                                                          return tapThumbsUp(
                                                              e.replyId,
                                                              e.usersLike,
                                                              e.replyCommentUserid);
                                                        },
                                                        size: 14,
                                                        isLiked: null,
                                                        bubblesColor:
                                                            BubblesColor(
                                                          dotPrimaryColor:
                                                              Color(0xFFDE5A02),
                                                          dotSecondaryColor:
                                                              Color(0xFFDE5A02),
                                                        ),
                                                        likeBuilder:
                                                            (bool isLiked) {
                                                          return _buildLikeIcon(e
                                                              .usersLike
                                                              .contains(e
                                                                  .replyCommentUserid));
                                                        },
                                                        likeCount:
                                                            e.usersLike.length,
                                                        countBuilder:
                                                            (int count,
                                                                bool isLiked,
                                                                String text) {
                                                          var color =
                                                              Colors.grey;
                                                          Widget result;
                                                          if (count == 0) {
                                                            result = Text(
                                                              "",
                                                              style: TextStyle(
                                                                  color: color,
                                                                  fontSize: 12),
                                                            );
                                                          } else
                                                            result = Text(
                                                              text,
                                                              style: TextStyle(
                                                                  color: color,
                                                                  fontSize: 12),
                                                            );
                                                          return result;
                                                        },
                                                      )
                                                    ],
                                                  ),
                                                  Container(
                                                    child: Text('${e.content}',
                                                        maxLines: null),
                                                    margin: EdgeInsets.only(
                                                        top: 8, bottom: 10),
                                                  ),
                                                  Divider(
                                                    color:
                                                        rgba(235, 235, 235, 1),
                                                    height: 1,
                                                  ),
                                                ]),
                                          ),
                                        )
                                      ],
                                    ),
                                  ))
                              .toList()
                          : [],
                    )
                  ]),
            ),
          )
        ],
      ),
    );
  }

  //点击回复
  void tapReplay() {
    widget.getFocus();
    CommentModelProvider commentProvider =
        Provider.of<CommentModelProvider>(context);
    commentProvider.setCurrentId(widget.item.commentId);
    commentProvider.modifyPlaceHolder(widget.item.userInfo.nickname);
  }

  //点赞 + 取消
  Future<bool> tapThumbsUp(String commentId, List<dynamic> likes, String id) {
    final Completer<bool> completer = new Completer<bool>();
    //取消点赞
    CommentModelProvider commentProvider =
        Provider.of<CommentModelProvider>(context);
    if (likes.contains(id)) {
      commentProvider.thumbsDown(commentId);
      completer.complete(false);
    } else {
      commentProvider.thumbsUp(commentId);
      completer.complete(true);
    }
    return completer.future;
  }
}

Widget _buildLikeIcon(bool isLiked) {
  return isLiked
      ? SizedBox(
          child: Image.asset("lib/assets/images/comment/thumbs_up.png",
              fit: BoxFit.contain),
          width: 12,
          height: 12)
      : SizedBox(
          child: Image.asset("lib/assets/images/comment/thumbs_down.png",
              fit: BoxFit.contain),
          width: 12,
          height: 12);
}
